<template>
  <div id="message">
    <div class="title">考试动态</div>
    <div class="wrapper">
      <div class="title1">
        <el-input
            placeholder="动态标题"
            v-model="message.title"
            clearable>
        </el-input>
      </div>
      <div class="content">
        <el-input
            type="textarea"
            :rows="3"
            placeholder="动态内容"
            v-model="message.content"
            clearable>
        </el-input>
      </div>
      <div class="btn">
        <el-button type="primary" @click="submitMsg()">发表</el-button>
      </div>
      <div class="all">
        <ul class="msglist">
          <li class="list"
              @mouseenter="enter(index)"
              @mouseleave="leave(index)"
              v-for="(data,index) in msg.arr" :key="index"
          >
            <div style="display: flex;justify-content: center;margin-bottom: 20px">
              <span class="name">{{data.messageName+'的动态'}}</span>
              <span class="date"><el-icon><Clock/></el-icon>{{data.time}}</span><br>
            </div>
            <p class="titlelist"><el-icon><Promotion/></el-icon>{{data.title}}</p>
            <span class="content">{{data.content}}</span><br>
            <span class="replay" @click="replay(data)" v-if="flag && index === current">评论</span>
            <div v-for="(replayData,index2) in data.replays" :key="index2">
              <template v-if="replayData !== null">
                <p class="datelist"><el-icon><Clock/></el-icon>{{replayData.replayTime}}</p>
                <p class="comment">
                  <el-icon><ChatDotRound/></el-icon>
                  {{replayData.replayName+": "+replayData.replay}}
                </p>
              </template>
            </div>

          </li>
        </ul>
      </div>
      <div class="pagination">
        <el-pagination
            @size-change="pageSizeChange"
            @current-change="pageNumChange"
            :current-page="pagination.pageNum"
            :page-sizes="[4,6,8,10]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {getCurrentInstance,onMounted,reactive, ref} from "vue";
import {Promotion,Clock,ChatDotRound} from '@element-plus/icons-vue';
import {ElMessage, ElMessageBox,ElLoading} from "element-plus";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "message",
  components: {Promotion,Clock,ChatDotRound},
  setup(){
    const {proxy} = getCurrentInstance()
    let flag = ref(false)
    let current = ref(null)//鼠标移动到的当前页
    let pagination = reactive({
      pageNum: 1, //当前页
      total: Number(''), //记录条数
      pageSize: 5 //每页条数
    })
    let message = reactive({
      title: "",
      content: ""
    })
    let msg = reactive({
      arr: []
    })
    onMounted(()=>{
      getMsg()
    })
    function submitMsg(){
      if(message.title.length === 0 || message.content.length === 0) { //非空判断
        ElMessage({
          type: 'error',
          message: '标题与内容不能为空',
          center: true
        })
      }else{
        let info = {
          time: new Date(),
          // eslint-disable-next-line no-undef
          messageName: $cookies.get("name"),
          // eslint-disable-next-line no-undef
          studentId: $cookies.get("id")
        }
        proxy.$axios.post(
            '/message/add',
            {
              ...message,
              ...info
            }
        ).then(
          response => {
            if (response.data){
              ElMessage({
                type: 'success',
                message: '发表成功',
                center: true
              })
            }
            getMsg()
          },
          error => {
            console.log('请求失败', error.message)
          }
        )
        message.content = ""
        message.title = ""
      }
    }
    function getMsg(){
      let loadingInstance = ElLoading.service({
        fullscreen: true,
        text: '正在加载'
      })
      proxy.$axios.get(`/messages/${pagination.pageNum}/${pagination.pageSize}`).then(
          response => {
            msg.arr = [...response.data.list]
            console.log(msg.arr)
            pagination.total = response.data.total
            pagination.pageNum = response.data.pageNum
            pagination.pageSize = response.data.pageSize
            loadingInstance.close()
          },
          error => {
            console.log('请求失败', error.message)
          }
      )
    }
    function replay(data){
      ElMessageBox.prompt('评论内容','发评论',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/, //匹配所有字符串，除了换行符除外
        inputErrorMessage: '评论内容不能为空'
      }).then(({value}) =>{
        let info = {
          replay: value,
          replayTime: new Date(),
          // eslint-disable-next-line no-undef
          replayName: $cookies.get("name"),
          messageId: data.id
        }
        proxy.$axios.post(
            '/replay/add',
            {
              ...info
            }
        ).then(
            response => {
              if (response.data){
                ElMessage({
                  type: 'success',
                  message: '发送成功',
                  center: true
                })
                getMsg()
              }
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '取消输入',
        })
      })
    }

    function pageSizeChange(value){//改变当前记录条数
      pagination.pageSize = value
      getMsg()
    }
    function pageNumChange(value){//改变当前页码
      pagination.pageNum = value
      getMsg()
    }
    function enter(index) {
      flag.value = true
      current.value = index
    }
    function leave(index) {
      flag.value = false;
      current.value = index;
    }
    return{
      pagination,
      getMsg,
      message,
      msg,
      flag,
      current,
      enter,
      leave,
      pageSizeChange,
      submitMsg,
      pageNumChange,
      replay
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
}
.btn {
  padding-bottom: 20px;
  display: flex;
  justify-content: center;
}
#message {
  width: 980px;
  margin: 0 auto;
}
.title {
  margin: 20px;
}
.content {
  padding: 20px 0px;
}
#message .wrapper {
  background-color: #fff;
  padding: 20px;

}
.all .date {
  color: #0AEECBFF;
  font-size: 15px;
}
.date{
  width: 200px;
  position: absolute;
  margin-top: 5px;
  left: 200px;
}
.datelist{
  margin: 5px;
  color: #0AEECBFF;
}
.list {
  background-color: #eee;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 5px;
  position: relative;
  transition: all .3s ease;

}
.title {
  text-align: center;
  font-size: 20px;
  margin: 20px;
  color: #2CD9D9FF;
  display: flex;
  justify-content: center;
}
.titlelist{
  font-size: 10px;
}
.name{
  color: #000000FF;
  font-size: 20px;
}
.comment {
  margin: -7px 0px;
  padding-bottom: 12px;
  font-size: 13px;
  cursor: pointer;
  color: #28b2b4;
}
.replay {
  position: absolute;
  right: 30px;
  bottom: 15px;
  color: tomato;
  cursor: pointer;
  transition: all .3s ease;
}
.content{
  text-align: center;
  line-height: 30px;
}
</style>